To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
In this article, we’ll look at how to add layouts.
Variable Width Content
We can set a breakpoint prop to 'auto' to make the column variable.
Breakpoints include xs, sm , md , and lg and xl .
xs is smaller than 576px wide.
sm is bigger than or equal to 576px wide.
md is bigger than or equal to 768px wide.
lg is bigger than or equal to 992px wide.
xl is bigger than or equal to 1200px wide.
For instance, we can write:
<template>
<div id="app">
<b-container>
<b-row>
<b-col col >1</b-col>
<b-col col sm="auto">2</b-col>
<b-col col >3</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
to make the middle column variable width.
We added the col and sm='auto' to make the middle column variable width and the other columns fill the remaining space.
Responsive Classes
We can use the cols prop to adjust the column width proportion.
The value should be between 1 and 12.
For example, we can write:
<template>
<div id="app">
<b-container>
<b-row>
<b-col cols="8">8</b-col>
<b-col cols="4">4</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then we have the left column taking 8 / 12 or two-thirds of the space.
The right column takes 4 / 12 or a third of the space.
Stacked to Horizontal
We can use the sm prop to create a grid that’s stacked on small devices and becoming horizontal of medium devices.
For example, we can write:
<template>
<div id="app">
<b-container>
<b-row>
<b-col sm="8">8</b-col>
<b-col sm="4">4</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then on a narrow screen, the 8 is above the 4, while on wider screens they’re side by side.
Alignment
We can use the align-v prop on b-row to vertical-align the content.
For example, we can write:
<template>
<div id="app">
<b-container>
<b-row align-v="center">
<b-col>1</b-col>
<b-col>2</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
<style>
.row {
height: 200px;
}
</style>
Then the row is centered in the b-row .
Other possible values of align-v can be 'start' to align the rows to the top edge.
Also, we can set it to 'end' to align the rows to the bottom edge.
'baseline' aligns the tallest row to the top edge.
And 'stretch' stretches the height to the height of the container.
Horizontal Alignment
To horizontally align items, we can use the align-h prop to do that.
For example, we can write:
<template>
<div id="app">
<b-container>
<b-row align-h="start">
<b-col cols="4">1</b-col>
<b-col cols="4">2</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We used the align-h prop to align the items to the left with the value 'start'
Other values includes 'center' , which aligns content to the center.
'end' align contents to the right.
'around' spreads the content horizontally.
'between' put the content near the edges.
Ordering Columns
We can use the order-* prop to control the visual order of our content.
These props are responsive.
For instance, we can write:
<template>
<div id="app">
<b-container>
<b-row>
<b-col order="2">foo</b-col>
<b-col order="1">bar</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Because of the order prop, the ‘foo’ div is to the right of the ‘bar’ div.
We can write order-md , order-sm , etc. to change the order only when those breakpoints are hit.
Conclusion
There are many ways to size columns.
We can change the size according to breakpoint so we can have responsive layouts.
We can add spaces wherever we want as well.
